<template>
  <div class="home">
    <Layout>
      <!--固定，移动端的页面基本都是 顶天立地的 顶部 header 底部 tabbar-->
      <search-com @close-search="closeShow"
        v-if="showSearch"></search-com>
      <work-info @update:closeWork="closeWorkInfo"
        :companyId="companyId"
        :workId="workId"
        v-if="showWorkInfo">
      </work-info>
      <van-sticky :offset-top="0">
        <!--1. 搜索-->
        <div class="search">
          <div class="location">
            <h3>北京</h3> <img class="select"
              :src="selectIcon"
              alt="下拉选择">
          </div>
          <div class="kw"
            @click="searchShow">
            <input type="text"
              placeholder="搜索..."
              disabled>
            <img class="fdj"
              :src="sousuoIcon"
              alt="放大镜">
          </div>

        </div>
      </van-sticky>
      <!-- 轮播图 -->
      <div class="banner">
        <van-swipe class="my-swipe"
          :autoplay="3000"
          indicator-color="white">
          <van-swipe-item v-for="ele in state.bannerList">
            <van-image width="100%"
              :src="ele.imageUrl" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <!-- 选项卡 -->
      <div class="tabs">
        <div class="header">
          <div class="left">
            <div class="tab"
              :class="{active:currentTab==1?'active':''}"
              @click="tabHandler(1)">推荐</div>
            <div class="tab"
              :class="{active:currentTab==2?'active':''}"
              @click="tabHandler(2)">最新</div>
          </div>
          <div class="right">
            <div class="filter">筛选</div>
          </div>
        </div>
        <!-- 是用无尽滚动需要Tina阿基overflow:auto以及height高度 -->
        <div class="work-list"
          style="overflow: auto"
          ref="listWrap"
          v-if="state.workList">
          <ul class="list"
            v-infinite-scroll="loadmore"
            :infinite-scroll-disabled="disable"
            infinite-scroll-distance="1">
            <li class="item"
              v-for="work in state.workList"
              :key="work._id"
              @click="goWorkDetail(work)">
              <div class="header">
                <div class="title">{{work.title}}</div>
                <div class="salary">{{work.salary}}</div>
              </div>
              <div class="tag">{{work.workAddress}}|{{work.workRange}}|{{work.education}}</div>
              <div class="welfare">
                <span v-for="(welfare,index) in work.welfare"
                  :key="index">{{welfare}}</span>
              </div>
              <div class="company-info"
                v-if="work.companyInfo">
                <div class="left">
                  <div class="img"><img :src="work.companyInfo[0].logoUrl"
                      alt=""></div>
                  <div class="info">
                    <h2>{{work.companyInfo[0].title}}</h2>
                    <p>
                      <span>{{work.companyInfo[0].companyType}}</span>
                      <span>{{work.companyInfo[0].companyNumber}}</span>
                    </p>
                  </div>
                </div>
                <div class="right">
                  <div class="submit">立即投递</div>
                </div>
              </div>
            </li>
            <div class="load-moreing"
              v-if="showLoading">
              <van-loading text-color="#0094ff"
                size="15px" />加载ing...
            </div>
          </ul>
          <p v-if="noMore"
            class="no-more">暂无更多的数据...</p>
        </div>
      </div>
    </Layout>
  </div>
</template>
<script setup lang="ts">
  import Layout from '../Layout/index.vue'
  import selectIcon from '../../assets/icon/xuanze.png'
  import sousuoIcon from '../../assets/icon/sousuo.png'
  import b1 from '../../assets/banner/b1.jpg'
  import clogo from '../../assets/banner/company-logo.jpg'
  import SearchCom from '../../components/Search/SearchCom.vue'
  import WorkInfo from '../../components/WorkInfo/WorkInfo.vue'
  import { reactive, onMounted, ref, Ref, toRaw, computed } from 'vue'
  import { getBannerBoys, getWorkList, IBanner, IWork } from '@/api/work'
  import { useRouter } from 'vue-router'
  import { log } from 'console'
  const router = useRouter()
  // 加载loading
  let showLoading = ref(false)
  // 关闭搜索组件
  let showSearch = ref(false)
  const searchShow = () => {
    showSearch.value = true
  }
  const closeShow = () => {
    showSearch.value = false
  }
  //当前选项卡索引
  let currentTab = ref(1)
  // 当前页的页数
  let page = ref(0)
  // 总共的职位数量
  let total = ref(9999999)
  // 判断还有没有更多了
  let noMore = computed(() => state.workList.length >= total.value)
  let disable = computed(() => noMore.value)
  // 如果有多个属性,要定义,可以通过type进行设置
  type StateType = {
    bannerList: IBanner[]
    workList: IWork[]
  }
  const state: StateType = reactive({
    bannerList: [],
    workList: []
  })
  // vue在mounted中挂载数据,因为没有created了
  onMounted(async () => {
    let response = await getBannerBoys()
    state.bannerList = response.data.info.banners
    getWorkListData(1)
  })
  // 获取轮播图
  getBannerBoys().then(res => {
    console.log(res)
    state.bannerList = res.data.info.banners
  })
  // 切换选项卡后,内容滚会顶部
  const listWrap: Ref<HTMLElement> = ref()
  const tabHandler = async (type: number) => {
    listWrap.value.scrollTop = 0
    page.value = 0
    currentTab.value = type
    getWorkListData(type)
  }
  // 点击tab触发选项卡切换
  const getWorkListData = async (type: number) => {
    let rs = await getWorkList({ type })
    state.workList = rs.data.list
  }

  // 加载更多
  const loadmore = async () => {
    showLoading.value = true
    page.value++
    const newWorkList = await getWorkList({ type: currentTab, page: page.value })
    // console.log(newWorkList.data.list)
    const newRs = newWorkList.data.list
    state.workList = [...toRaw(state.workList), ...newRs]
    // console.log(state.workList)
    // 接口中有总数
    total.value = newWorkList.data.total
    showLoading.value = false
  }
  // 跳转到职位详情页面
  // const goDetail = (work: IWork) => {
  //   router.push({
  //     name: 'workinfo',
  //     query: {
  //       companyid: work.companyInfo[0]._id,
  //       workid: work._id
  //     }
  //   })
  // }
  let showWorkInfo = ref(false)
  let companyId = ref('')
  let workId = ref('')
  // 显示职业组件
  const closeWorkInfo = () => {
    showWorkInfo.value = false
  }
  // 改变参数值,进行父子组件传值
  const goWorkDetail = (work: IWork) => {
    console.log(1111)

    showWorkInfo.value = true
    companyId.value = work.companyInfo[0]._id
    workId.value = work._id
  }
</script>
<style lang="less" scoped>
@mainColor: #149639;
.home {
  // 顶部搜索
  .search {
    background-color: #149639;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 13px;

    .location {
      display: flex;
      align-items: center;

      h3 {
        /*
                        移动端要适配 一般使用方案？ rem 方法
                            规则：基准设计稿 iPhone6 ： 750px * 1344px
                            1rem = 100px
                            其他的元素都以这个基准换算为rem单位
                            后面在动态的去更改 html 根标签的 font-size 值，实现等比的缩放。
                    */
        /*webstorm px2rem alt+d 自动转换 */
        font-size: 20px;
        color: #fff;
        margin-right: 10px;
      }

      .select {
        width: 13px;
        height: 9px;
        margin-right: 10px;
      }
    }

    .kw {
      flex: 1;
      position: relative;
      input {
        width: 100%;
        outline: none;
        border: none;
        padding-left: 13px;
        // width: 50px;
        height: 35px;
        line-height: 35px;
        background: #f4f4f4;
        border-radius: 15px;
      }

      .fdj {
        position: absolute;
        // top: 8px;
        top: 8px;
        right: 20px;
        width: 20px;
        height: 20px;
        // right: 35px;
      }
    }
  }
  // 轮播图
  .banner {
    img {
      width: 100%;
      height: 150px;
    }
  }
  // 选项卡
  .tabs {
    padding: 0 13px;
    .header {
      display: flex;
      height: 55px;
      justify-content: space-between;
      align-items: center;
      font-size: 15px;
      color: #555555;
      .left {
        width: 75px;
        display: flex;
        justify-content: space-between;
        .tab {
          position: relative;
          &.active {
            color: #46ac63;
            &::after {
              content: '';
              position: absolute;
              bottom: -10px;
              right: 7px;
              width: 15px;
              height: 3px;
              background: #149639;
            }
          }
        }
      }
      .right {
        .filter {
          width: 50px;
          height: 25px;
          border-radius: 10px;
          color: #9e9e9e;
          background: #f4f4f4;
          font-size: 12px;
          text-align: center;
          line-height: 25px;
        }
      }
    }
    .work-list {
      position: relative;
      height: calc(100vh - 40px - 55px - 151px - 80px);
      .list {
        .item {
          padding: 14px 0 18px 0;
          border-bottom: 1px solid #f4f4f4;
          &:nth-last-of-type(1) {
            border: none;
          }
          .header {
            height: 20px;
            .title {
              font-size: 20px;
            }
            .salary {
              font-size: 15px;
              font-weight: 600;
              color: @mainColor;
            }
          }
          .tag {
            margin-top: 10px;
            font-size: 12px;
            color: #898989;
          }
          .welfare {
            margin-top: 10px;
            span {
              display: inline-block;
              background: #f4f4f4;
              color: #b7b7b7;
              // width: 35px;
              padding: 0 5px;
              height: 20px;
              line-height: 20px;
              text-align: center;
              border-radius: 5px;
              margin-right: 5px;
            }
          }
          .company-info {
            margin-top: 10px;
            display: flex;
            justify-content: space-around;
            .left {
              display: flex;
              flex: 1;
              .img {
                width: 35px;
                height: 35px;
                border-radius: 50%;
                img {
                  width: 35px;
                  height: 35px;
                }
              }
              .info {
                margin-left: 10px;
                // display: flex;
                h2 {
                  font-size: 13px;
                }
                p {
                  margin-top: 5px;
                  color: #b7b7b7;
                  font-size: 12px;
                  span {
                    margin-right: 10px;
                  }
                }
              }
            }
            .right {
              font-size: 12px;
              line-height: 25px;
              border: 1px solid @mainColor;
              text-align: center;
              height: 25px;
              width: 65px;
              color: @mainColor;
              border-radius: 20px;
              // margin: 10px auto;
            }
          }
        }
        .load-moreing {
          display: flex;
          justify-content: center;
          align-items: center;
          // text-align: center;
        }
      }
      .loading-wrap {
        background: rgba(0, 0, 0, 0.7);
        position: absolute;
        top: 50%;
        left: 50%;
        width: 150px;
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translate(-50%, -50%);
        border-radius: 20px;
      }

      .no-more {
        padding: 10px 0;
        text-align: center;
        color: #666;
      }
    }
  }
}
</style>